<template>
  <div>
    <!-- 在所需懒加载的图片上加上指令 -->
    <div class="poster"><img v-lazy="film.poster" alt="" /></div>
    <div>{{ film.name }}</div>
    <div>{{ film.category }}</div>
    <div>{{ film.nation }}</div>
    <div>{{ film.grade }}</div>
    <div class="synopsis">{{ film.synopsis }}</div>

    <!-- <div v-if="!film.actors"></div> -->
    <!-- 必须加一个判断，否则直接引进来的话，actors数据还没有进来，会报错 -->
    <!-- 或者在下边的filem中加actors:[] -->

   <!-- 该组件挂载在mounted,只是在初始时候填充一次，后边不会再更新
   而key值此时还没有请求过来数据，因此也没办法循环，导致一个div都没有，所以报错
   也就是数据还没有请求到数据时候，那个swiper已经实例化了，此时还没有得到外层div宽度，没办法滚动
    -->


<p>演职人员</p>
    <Swiper :key="'actors_'+film.actors.length">
      <div v-for="item in film.actors"  class="swiper-slide">
       <img :src="item.avatarAddress" >
       <div>
         <p>{{item.name}}</p>
       <p>{{item.role}}</p>
       </div>
      
    </div>
    </Swiper>
  </div>
</template>

<script>
//哪个网页用添加到哪里，写到main中全局引用到
// import Vue from "vue"
// import VueLazyload from "vue-lazyload"
// Vue.use(VueLazyload,{
// //懒加载时候的缩略图
// loading:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602430514599&di=82de760722b6cbf32690c51826f4a632&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201506%2F27%2F20150627152644_yNMBY.jpeg"

// })

import { detailData } from "../../api/api";
import Swiper from "../../components/Swiper"

export default {
  data() {
    return {
      id: 0,
      film: {actors:[]},
    };
  },

components:{
  Swiper
},
created(){
  //发送时间总线命令，但是他有个问题，命令发布了，接收方修改了
  //但是这个值修改不可逆，也就是接收方无法传递给发送方，再恢复原来布尔值
  //解决方法就是在生命周期销毁前再把布尔值恢复
  this.$bus.$emit("footerbar",false)
},




  async mounted() {
    //将请求过来的数据一一对data中的数据进行赋值
    this.id = this.$route.params.id;
    let ret = await detailData(this.id);
    console.log(ret)
    this.film = ret.data.data.film;
  },

//组件在被销毁前执行的时间总线发布，让底部导航组件再把布尔值恢复
beforeDestroy(){
  this.$bus.$emit("footerbar",true)
}


};





</script>

<style lang="scss" scoped>
.swiper-slide{
  img{
    width: 80px;
  }
}





.poster {
  width: 100%;
  height: 210px;
  overflow: hidden;
  img {
    width: 100%;
    // height: 100%;
  }
}

.synopsis {
  margin: 0 auto;
  width: 345px;
  height: 38px;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #797d82;
}


</style>